<template>
  <div class="nnn">
      <ul>
          <li v-for="(item , index) in arr" v-bind:key="index">
              {{item}}
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    props:['arr']
}
</script>

<style>
    .nnn{
        width:1000px;
        margin:0 auto;
        height:60px;
    }
    .nnn ul{
        display:flex;
        height:100%;
        width:800px;
        justify-content: space-around;
        align-items:center;
    }
    .nnn ul li{
        color:#fff;
        font-size:16px;
        padding:5px 20px;
        border-radius:15px;
    }
    .nnn ul li:hover{
        background:#930e0b;
    }
</style>